<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>员工列表</title>
        <link rel="stylesheet" href="css/bootstrap.min.css"/>
        <link rel="stylesheet" href="css/style.css"/>
        <script src="js/jquery-3.4.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/script.js" charset="UTF-8"></script>
    </head>
    <body>

        <div class="container">

            <br>
            <h1 class="text-center text-success">员工列表</h1>
            <br>

            <table id="dataTable" class="table table-hover text-center">
                <tr>
                    <td colspan="6" class="title">
                        <a href="add_employee.jsp" class="btn btn-sm btn-success">+添加新员工</a>
                    </td>
                </tr>
                <tr>
                    <th>员工编号</th>
                    <th>员工姓名</th>
                    <th>员工性别</th>
                    <th>出生日期</th>
                    <th>员工头像</th>
                    <th>操作</th>
                </tr>
                <c:forEach items="${empList}" var="emp">
                    <!--这里为了能够从数据库删除学生的同时，删除当前tr元素，所以给了每个tr一个id，可自定义，这里是用tr学号作为tr元素的id-->
                    <tr id="tr${emp.empId}">
                        <td>${emp.empId}</td>
                        <td>${emp.empName}</td>
                        <td>${emp.empGender}</td>
                        <td>${emp.empDob}</td>
                        <td>
                            <img src="photo/${emp.empPhoto}" alt="${emp.empName}" class="img-thumbnail img-circle img">
                        </td>
                        <td>
                            <a href="javascript:deleteEmp('${emp.empId}')">删除</a>
                        </td>
                    </tr>
                </c:forEach>
            </table>

        </div>
    </body>
</html>
